new Vue({
    name: 'game',
    el: '#app',
    template: `
        <div id="app">
            <top-bar :turn="turn"
                :players="players"
                :currentPlayerIndex="currentPlayerIndex"/>
            <transition name="zoom">
                <overlay v-if="activeOverlay">
                    <component :is="'overlay-content-' + activeOverlay"                   
                        :player="currentPlayer"
                        :opponent="currentOpponent"
                        :players="players"/>
                </overlay>
            </transition>
            <transition name="fade">
                <hand :cards="testHand" v-if="!activeOverlay"
                    @card-play="handleCardPlay"/>
            </transition>
        </div>
    `,
    data: state,
    computed: {
        testCard() {
            return cards.repair
        }
    },
    methods: {
        handleCardPlay(card) {
            const idx = this.testHand.indexOf(card)
            this.testHand.splice(idx, 1)
        },
        testDrawCard() {
            const ids = Object.keys(cards)
            const rid = ids[Math.floor(Math.random() * ids.length)];
            return {
                uid: cardUid++,
                id: rid,
                def: cards[rid]
            }
        },
        createTestHand() {
            const cards = [];
            for (let i = 0; i < 5; i++) {
                cards.push(this.testDrawCard())
            }
            return cards
        }
    },
    created() {
        this.testHand = this.createTestHand()
    }
})

window.addEventListener('resize', () => {
    state.worldRatio = getWorldRatio()
})